<template>
    <div class="tooler-customize">
        <!-- 自定义确认对话框 -->
        <UxDialog :visible="notify" title="" @close="notify = false">
            <div class="customize-notify">
                <h3>Want to make this layer customizable?</h3>
                <p>Custom layers may come in handy if your store accepts customer requests for changing the product
                    design within specified print areas.</p>
                <div class="customize-media">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/customize-media-1.png" alt="" />
                        <img src="https://img.podpartner.com/static/images-20230202/customize-media-2.png" alt="" />
                        <img src="https://img.podpartner.com/static/images-20230202/customize-media-3.png" alt="" />
                        <img src="https://img.podpartner.com/static/images-20230202/customize-media-3-mask.png"
                             alt="" />
                    </figure>
                </div>
                <p>When orders with such requests are imported to PODpartner, you won't have to recreate the product
                    templates. You can simply replace or edit the custom layer of the product under its order details
                    and proceed to payment. <br>
                    This will make the order processing much more efficient. <a
                       href="/document/help-center?classify=3&detail=95" target="_blank">Learn more</a></p>

                <UxCheckbox v-model="displayed">Don't show this again.</UxCheckbox>
                <!-- <label>
                    <input type="checkbox" v-model="displayed">
                    <i><svg-icon name="checkbox-active" /></i>
                    <span>Don't show this again.</span>
                </label> -->
                <fieldset>
                    <button @click="notify = false">Cancel</button>
                    <button @click="setNotifySure()" type="primary">Activate customization</button>
                </fieldset>
            </div>
        </UxDialog>

        <!-- 输入名称 -->
        <UxDialog :visible="insert" @close="insert = false">
            <div class="customize-insert">
                <img src="@/assets/images/designer/dialog-custom-insert.png" alt="">
                <h3>Name this custom layer</h3>
                <label><input type="text" v-model="name"></label>
                <fieldset>
                    <button @click="setInsert()" type="primary">Save</button>
                    <button @click="insert = false">Cancel</button>
                </fieldset>
            </div>
        </UxDialog>

        <!-- 自定义取消对话框 -->
        <UxDialog :visible="cancel" title="" @close="cancel = false">
            <div class="customize-cancel">
                <img src="@/assets/images/designer/dialog-custom-deactivate.png" alt="">
                <p>Are you sure you want to deactivate customization?</p>
                <fieldset>
                    <button @click="setCancel()" type="primary">OK</button>
                    <button @click="cancel = false">Cancel</button>
                </fieldset>
            </div>
        </UxDialog>

        <!-- 半自定义超出三个 -->
        <UxDialog :visible="oversize" title="" @close="oversize = false">
            <div class="customize-oversize">
                <img src="@/assets/images/designer/dialog-custom-maximum.png" alt="">
                <p>The maximum number of custom layers is 3.</p>
                <button @click="oversize = false" type="primary">OK</button>
            </div>
        </UxDialog>


        <!-- 禁止使用 -->
        <UxDialog :visible="!!forbid" @close="forbid = null">
            <div class="customize-forbid">
                <figure>
                    <img src="@/assets/images/designer/dialog-custom-maximum.png" alt="">
                </figure>
                <p>
                    <strong>Embroidery design added. Custom layers cannot be added.</strong>
                </p>

                <fieldset>
                    <button @click="forbid = null" type="primary">OK</button>
                </fieldset>
            </div>
        </UxDialog>

    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {

    data () {
        return {
            layer: null, // 图层
            name: '',
            notify: false,
            insert: false,
            cancel: false,
            displayed: false,
            oversize: false,
            forbid: false,
        };
    },
    computed: {
        ...mapGetters("designer", {
            customizeList: 'getPiecesCustomize',
            pieces: "getPieces",
        }),
        // 是否是领标
        ...mapGetters("user", {
            userInfo: "getUserInfo",
        }),
    },

    methods: {

        // 提示确认
        setNotifySure () {
            let config = {};
            let email = this.userInfo.email || 'unlogin';
            // let customize_notify_displayed = false; // 禁止显示弹窗
            try {
                config = JSON.parse(localStorage.getItem('CONFIG') || '{}')
                if (!config.customize_notify_displays) {
                    config.customize_notify_displays = []
                }
                if (this.displayed) {
                    config.customize_notify_displays = [...config.customize_notify_displays, email];
                    localStorage.setItem('CONFIG', JSON.stringify(config))
                }
                // config.customize_notify_displayed = this.displayed;
            } catch (error) {
                // console.log(error)
            }

            this.insert = true;
            this.notify = false;
        },

        // 添加自定义
        setInsert () {
            const name = this.name.trim();
            if (name) {
                this.$set(this.layer, 'customize', name)
                this.insert = false;
            } else {
                this.$uxMessage.error("Layer name cannot be empty!");
            }
        },

        // 取消自定义
        setCancel () {
            this.$delete(this.layer, 'customize')
            this.cancel = false;
        },

        getCustomizeName (layer) {
            let names = {
                "Front Side - Middle": 'Front_middle',
                "Front Side - Top": 'Front_top',
                "Front Side - Bottom": 'Front_bottom',
                "Front Side - Lower Left": 'Front_lower_left',
                "Front Side - Lower Right": 'Front_lower_right',
                "Front Side - Shoulder Left": 'Front_shoulder_left',
                "Front Side - Shoulder Right": 'Front_shoulder_right',
                "Back Side - Middle": 'Back_middle',
                "Back Side - Top": 'Back_top',
                "Back Side - Bottom": 'Back_bottom',
                "Back Side - Lower Left": 'Back_lower_left',
                "Back Side - Lower Right": 'Back_lower_right',
                "Back Side - Neck Label Outer": 'Back_neck_label',
                "Sleeve Left": "Left_sleeve",
                "Sleeve Right": "Right_sleeve",
                "Long Sleeve Left": "Sleeve_left",
                "Long Sleeve Right": "Sleeve_right",
                "Neck Label Inner": "Inside_neck_label",

                'Front Side - Left Leg Center': 'Front_legL_center',
                'Front Side - Left Leg Top': 'Front_legL_top',
                'Front Side - Left Leg Bottom': 'Front_legL_bottom',
                'Front Side - Right Leg Center': 'Front_legR_center',
                'Front Side - Right Leg Top': 'Front_legR_top',
                'Front Side - Right Leg Bottom': 'Front_legR_bottom',

                'Back Side - Left Leg Center': 'Back_legL_center',
                'Back Side - Left Leg Top': 'Back_legL_top',
                'Back Side - Left Leg Bottom': 'Back_legL_bottom',
                'Back Side - Right Leg Center': 'Back_legR_center',
                'Back Side - Right Leg Top': 'Back_legR_top',
                'Back Side - Right Leg Bottom': 'Back_legR_bottom',
                'Back Side - Left Pocket': 'Back_pocket_left',
                'Back Side - Right Pocket': 'Back_pocket_right',

                'Front Side - Left Leg Pocket': 'Left_Leg_Pocket',
                'Front Side - Right Leg Pocket': 'Right_Leg_Pocket',
            };

            const piece = this.pieces.filter(piece => piece.layers.indexOf(layer) >= 0)[0];
            if (piece) {
                const name = names[piece.canvas_name] || ''
                const index = this.customizeList.length + 1;
                return name + '_' + index
            } else {
                return '';
            }
        },
        // 是否是定制
        setCustomize (layer) {
            if (this.pieces.find(i => i.type == 2 && i.layers.length > 0)) {
                // 如果有刺绣
                this.forbid = true;
            } else if (layer.customize) {
                this.cancel = true;
                this.layer = layer;
            } else if (this.customizeList.length >= 3) {
                // 超过3个不给绑定
                this.oversize = true
            } else {
                // 弹出确认对话框
                let config = {};
                let email = this.userInfo.email || 'unlogin';
                try {
                    config = JSON.parse(localStorage.getItem('CONFIG') || '{}');
                    this.displayed = (config.customize_notify_displays || []).indexOf(email) != -1 //通过email 来判断是否有操作过
                    // this.displayed = !!config.customize_notify_displayed; // false 打开notify弹窗
                } catch (error) {
                    // console.log(error)
                }

                this.layer = layer;
                this.name = this.getCustomizeName(layer);

                if (this.displayed) {
                    this.insert = true;
                } else {
                    this.notify = true;
                }
            }
        },
    },

    created () {
        this.$on("global:DESIGN_CUSTOMIZE", this.setCustomize);
    },
};
</script>
<style lang="scss" scoped>
.tooler-customize {
    position: absolute;
}

.customize-notify {
    padding: 40px 60px 40px;
    max-width: 720px;
    box-sizing: border-box;

    h3 {
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
        text-align: center;
    }

    &>p {
        margin-top: 12px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 20px;

        &>a {
            cursor: pointer;
            font-size: 14px;
            color: #087196;
            text-decoration: underline;

            &:hover {
                color: #287e9c;
                text-decoration: none;
            }
        }
    }

    .customize-media {
        width: 600px;
        height: 180px;
        background-color: rgb(246, 246, 246);
        border-radius: 5px;
        overflow: hidden;
        margin: 12px 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-image: url('https://img.podpartner.com/static/images-20230202/customize-media-bg.png');
        background-size: 600px 180px;
        background-repeat: no-repeat;
        position: relative;

        figure {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 238px;
            height: 100%;

            @keyframes show {
                0% {
                    opacity: 0;
                }

                33% {
                    opacity: 0;
                }

                50% {
                    opacity: 0;
                }

                51% {
                    opacity: 1;
                }

                100% {
                    opacity: 1;
                }
            }

            @keyframes hide {
                0% {
                    opacity: 1;
                }

                33% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 0;
                }
            }

            @keyframes trans {
                0% {
                    transform: translate(38px, 44px);
                    opacity: 1;
                }

                33% {
                    transform: translate(38px, 44px);
                    opacity: 1;
                }

                50% {
                    transform: translate(0, 0);
                    opacity: 1;
                }

                66% {
                    transform: translate(0, 0);
                    opacity: 0;
                }

                100% {
                    transform: translate(0, 0);
                    opacity: 0;
                }
            }

            img {
                width: 54px;

                &:nth-child(1) {
                    width: 132px;
                }

                &:not(:nth-child(1)) {
                    position: absolute;
                }

                &:nth-last-child(1) {
                    transform: translate(38px, 44px);
                }

                &:nth-child(2) {
                    animation: hide 4s forwards;
                }

                &:nth-child(3) {
                    opacity: 0;
                    animation: show 4s forwards;
                }

                &:nth-child(4) {
                    animation: trans 4s forwards;
                }
            }
        }
    }

    .form-checkbox {
        margin: 24px 0 30px;
    }

    // label {
    //     display: inline-flex;
    //     flex-direction: row;
    //     align-items: center;
    //     height: 24px;
    //     font-size: 14px;
    //     color: #000000;
    //     line-height: 14px;
    //     margin: 24px 0 30px;
    //     position: relative;

    //     cursor: pointer;
    //     input {
    //         opacity: 0;
    //         pointer-events: none;
    //         position: absolute;
    //         width: 0;
    //         height: 0;
    //         outline: 0;

    //         &:checked + i {
    //             border-color: #ea4c89;
    //             background-color: #ea4c89;
    //             svg {
    //                 color: #fff;
    //                 opacity: 1;
    //             }
    //         }
    //     }

    //     i {
    //         display: flex;
    //         align-items: center;
    //         justify-content: center;
    //         width: 16px;
    //         height: 16px;
    //         box-sizing: border-box;
    //         background: #ffffff;
    //         border-radius: 2px;
    //         margin-right: 8px;
    //         border: 1px solid #9e9e9e;
    //         font-size: 14px;
    //         text-align: center;
    //         line-height: 12px;
    //         text-indent: -99em;
    //         overflow: hidden;

    //         svg {
    //             width: 10px;
    //             height: 10px;
    //             opacity: 0;
    //         }
    //     }
    //     span {
    //         display: inline-block;
    //         vertical-align: top;
    //         line-height: 24px;
    //     }
    // }

    fieldset {
        display: flex;
        justify-content: center;

        button {
            width: 220px;
            margin: 0 4px;
        }
    }
}

.customize-insert {
    width: 320px;
    height: 414px;
    padding: 60px 14px 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;

    &>img {
        width: 80px;
        height: 80px;
    }

    h3 {
        margin-top: 20px;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 16px;
    }

    label {
        display: block;
        width: 100%;
        margin-top: 24px;
    }

    fieldset {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex: 1;
        justify-content: flex-end;

        button {
            height: 38px;
        }

        button+button {
            margin-top: 8px;
        }
    }
}

.customize-cancel {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    padding: 60px 14px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    &>img {
        width: 80px;
        height: 80px;
    }

    p {
        flex: 1;
        margin-top: 60px;
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
    }

    fieldset {
        width: 100%;
        display: flex;
        flex-direction: column;

        button {
            height: 38px;
        }

        button+button {
            margin-top: 8px;
        }
    }
}

.customize-oversize {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 14px 14px;

    &>img {
        width: 80px;
        height: 80px;
    }

    p {
        flex: 1;
        max-width: 260px;
        margin-top: 60px;
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
        white-space: normal;
        text-align: center;
    }

    button {
        width: 100%;
    }


}

.customize-forbid {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 56px 14px 14px;

    figure {
        width: 80px;
        height: 80px;

        img,
        svg {
            width: 100%;
            height: 100%;
        }
    }

    p {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin-bottom: 52px;

        strong {
            font-size: 16px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
        }

        span {
            margin-top: 10px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
        }
    }

    fieldset {
        display: flex;
        flex-direction: column;
        width: 100%;

        button {
            height: 38px;
        }

        button+button {
            margin-top: 8px;
        }
    }
}
</style>
